<template>
  <view class="container">

    <z-paging class="container" ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <!-- 页面头部标题 -->
        <view class="new-page-header">
          <!-- 状态栏占位 -->
          <view class="new-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
          <!-- 导航栏 -->
          <view class="new-nav-bar" :style="{ height: navBarHeight + 'px' }">
            <!-- 标题 -->
            <view class="new-header-title" :style="{ lineHeight: navBarHeight + 'px' }">我的订单</view>
          </view>
          <!-- 选项卡 -->
          <view class="tab-bar">
            <view class="tab-item" :class="{ 'tab-active': currentTab === index }" v-for="(tab, index) in tabList"
              :key="index" @click="switchTab(index)">
              <text class="tab-text">{{ tab.name }}</text>
            </view>
          </view>
        </view>
      </template>


      <!-- 订单列表 -->
      <view class="order-list">
        <view class="order-card" v-for="(order, index) in dataList" :key="index" @click="handleOrderClick(order)">
          <!-- 订单状态 -->
          <view class="order-status">
            <text class="status-text" :class="{
              'status-using': order.status == 1,
              'status-completed-all': order.status == 3 && currentTab === 0,
              'status-completed-finished': order.status == 3 && currentTab === 2
            }">
              {{ getStatusText(order.status) }}
            </text>
          </view>

          <!-- 订单信息 -->
          <view class="order-info">
            <view class="info-item">
              <text class="info-label">设备名称</text>
              <text class="info-value">{{ order.equipment.scene_type === 1 ? "陪护床" : "轮椅" }}
                <text v-if="order.equipment.device_id">（{{ order.equipment.device_id }}）</text>
              </text>

            </view>

            <view class="info-item">
              <text class="info-label">开始时间</text>
              <text class="info-value">
                {{ order.createtime }}
                <!-- <text class="time-highlight" :class="{ 'time-green': order.status === 'using' }">
                {{ order.startTime }}
              </text> -->
              </text>
            </view>

            <view class="info-item" v-if="order.answer_return_time && order.status == 1">
              <text class="info-label">到期时间</text>
              <text class="info-value">
                {{ answer_return_time_label(order.answer_return_time) }}

              </text>
            </view>

            <view class="info-item" v-if="order.status == 3">
              <text class="info-label">完成时间</text>
              <text class="info-value">
                {{ order.returntime_text }}
              </text>
            </view>


            <view class="info-item" v-if="order.status == 3">
              <text class="info-label">支付费用</text>
              <text class="info-value amount" :class="{ 'amount-blue': order.status === 'using' }">
                {{ order.rent_money || 0 }}
              </text>
            </view>

            <view class="info-item" v-else>
              <text class="info-label">预计金额</text>
              <text class="info-value amount" :class="{ 'amount-blue': order.status === 'using' }">
                {{ order.money }}
              </text>
            </view>



          </view>
        </view>
      </view>
    </z-paging>



  </view>
</template>

<script>
import navbarMixin from '@/common/mixin/navbar.js'
import { getMyOrder } from '@/api/index.js'
import dayjs from 'dayjs'

export default {
  mixins: [navbarMixin],

  data() {
    return {
      // 当前选中的选项卡
      currentTab: 0,
      // 选项卡列表
      tabList: [
        { name: '全部', value: 0 },
        { name: '使用中', value: 1 },
        { name: '已完成', value: 3 }
      ],
      // 订单数据
      orderData: {
        all: [

        ],
        using: [

        ],
        completed: [

        ]
      },
      dataList: [],
    }
  },

  computed: {
    /**
     * 当前选项卡对应的订单列表
     */
    currentOrderList() {
      // const tabValue = this.tabList[this.currentTab].value
      // return this.orderData[tabValue] || []
    },

  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {

  },
  // 挂载
  mounted() {
    console.log('mounted');
  },
  async onShow() {
    // const _res = await getMyOrder();

    // console.log('res', _res);

    // this.$set(this, 'orderData', {
    //   'all': _res.data,
    //   'using': _res.userIngOrder,
    //   'completed': _res.userFinishOrder,
    // })

  },

  methods: {
    queryList(pageNo, pageSize) {
      const app = this;

      let status = "";

      if (app.currentTab === 0) {
        status = ""
      } else if (app.currentTab === 1) {
        status = 1
      } else if (app.currentTab === 2) {
        status = 3
      }

      // 此处请求仅为演示，请替换为自己项目中的请求
      getMyOrder({
        status: status,
        page: pageNo, limit: pageSize
      }).then(res => {

        console.log("resresres", res)
        // app.total = res.total;

        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
        app.$refs.paging.complete(res.list);
      }).catch(res => {
        console.log('res', res);

        // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
        // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        app.$refs.paging.complete(false);
      })
    },
    answer_return_time_label(timer) {
      return dayjs(timer * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    /**
     * 切换选项卡
     */
    switchTab(index) {
      this.currentTab = index;
      this.$refs.paging.reload();
    },

    /**
     * 获取订单状态文本
     */
    getStatusText(status) {
      switch (status) {
        case '1':
          return '正在使用中'
        case '3':
          return '已完成'
        default:
          return '未知状态'
      }
    },

    /**
     * 订单卡片点击
     */
    handleOrderClick(order) {
      // 根据订单状态跳转到不同页面
      switch (order.status) {
        case '1':
          // 跳转到归还订单页面
          uni.navigateTo({
            url: `/pages/newreturn/index?code=${order?.id}&type=return`
          })
          break;
        case '3':
          // 跳转到完成订单页面
          // uni.navigateTo({
          //   url: '/pages/newcompleted/index'
          // })
          uni.navigateTo({
            url: `/pages/newreturn/index?code=${order?.id}&type=view`
          })
          break;
        default:
          uni.showToast({
            title: '查看订单详情',
            icon: 'none'
          })
          break;
      }
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    return {
      title: '我的订单',
      path: "/pages/neworder/index"
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 120rpx;
}

.new-page-header {

  // 选项卡样式
  .tab-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.2);

    .tab-item {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .tab-text {
        font-size: 30rpx;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
      }

      &.tab-active {
        background: #ffffff;

        .tab-text {
          color: #74b9ff;
          font-weight: 600;
        }

        &:first-child {
          border-radius: 16rpx 0 0 0;
        }

        &:last-child {
          border-radius: 0 16rpx 0 0;
        }
      }
    }
  }
}

// 订单列表
.order-list {
  padding: 30rpx;

  .order-card {
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;

    .order-status {
      padding: 24rpx 30rpx 0;

      .status-text {
        font-size: 38rpx;
        font-weight: 600;

        &.status-using {
          color: #00b894; // 绿色
        }

        &.status-completed-all {
          color: #74b9ff; // 蓝色
        }

        &.status-completed-finished {
          color: #74b9ff; // 蓝色  
        }
      }
    }

    .order-info {
      padding: 20rpx 30rpx 30rpx;

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .info-label {
          font-size: 26rpx;
          color: #666666;
        }

        .info-value {
          font-size: 26rpx;
          color: #333333;
          text-align: right;

          &.amount {
            font-weight: 600;

            &.amount-blue {
              color: #74b9ff;
            }
          }

          .time-highlight {
            &.time-green {
              color: #00b894;
            }

            &.time-red {
              color: #e74c3c;
            }
          }
        }    }
    }
  }
}
</style>